<template>
    <div class="SignTable">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>签到管理</el-breadcrumb-item>
            <el-breadcrumb-item>签到记录</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片-->
        <el-card class="box-card">
            <!--            搜索区域-->
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-select v-model="queryInfo.ucodes" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in buildingList"
                                :key="item.id"
                                :label="item.lable"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-date-picker
                            v-model="queryInfo.createDate"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="8">
                    <el-input placeholder="请输入账号或者姓名"  v-model="queryInfo.name" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="search" ></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!--            表格区域-->
            <el-table :data="signList" border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="楼栋名称" prop="bname"></el-table-column>
                <el-table-column label="寝室号" prop="qname"></el-table-column>
                <el-table-column label="学院" prop="cname"></el-table-column>
                <el-table-column label="班级" prop="classname"></el-table-column>
                <el-table-column label="时间" prop="createDate"></el-table-column>
                <el-table-column label="备注" prop="ucodes" >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.ucodes ===0" >{{scope.row.note}}</el-tag>
                        <el-tag type="success" v-else-if="scope.row.ucodes ===1">未签到</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="180px">
                    <template slot-scope="scope">
                        <!--                            修改-->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="upSign(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--                分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <el-dialog
                title="备注"
                :visible.sync="updateSign"
                width="50%"
                >
            <el-form :model="repairInfo" :rules="repairInfoRul" ref="repairInfoRef" label-width="80px">
            <el-form-item label="销勤备注" prop="note">
                <el-input type="textarea" v-model="repairInfo.note"></el-input>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="updateSign = false">取 消</el-button>
    <el-button type="primary" @click="updateSignById()">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "SignTable",
        data(){
            return{
                //列表
                signList: [],
                total: 0,
                queryInfo:{
                    page: 1,
                    size: 10,
                    ucodes: '',
                    createDate: '',
                    name: ''
                },
                //选择框
                buildingList: [
                    {
                        id: 1,
                        lable: '未签到'
                    },
                    {
                        id: 0,
                        lable: '其他'
                    }
                ],
                //备注框
                updateSign: false,
                repairInfo:{
                    note: '',
                    id: '',
                    ucodes: 0
                },
                repairInfoRul:{
                    note:[
                        { required: true,message: '请描述情况',trigger: 'blur'}
                    ],
                }

            }
        },
        created() {
            this.getSignList()
        },
        methods:{
           async getSignList(){
               const {data: res} = await this.$http.get('Sign/getAllNoSign',{
                   params: this.queryInfo
               })
               if(res.code !== 200) return this.$message.error(res.message)
               this.signList = res.data.data
               this.total = res.data.total
            },
            //监听pagesize的改变
            handleSizeChange(newSize){
                this.queryInfo.size = newSize
                this.getSignList()
            },
            //页码值改变
            handleCurrentChange(newPage){
                this.queryInfo.page = newPage
                this.getSignList()
            },
            //搜索
            async search(){
               if(this.queryInfo.createDate !== '') {
                   this.queryInfo.createDate = this.dateFormat(this.queryInfo.createDate)
               }
                const {data: res} = await this.$http.get('Sign/getAllNoSign',{
                    params: this.queryInfo
                })
                if(res.code !== 200) return this.$message.error(res.message)
                this.signList = res.data.data
                this.total = res.data.total
                console.log(res)
            },
            //日期转换
            dateFormat(dateData) {
                var date = new Date(dateData)
                var y = date.getFullYear()
                var m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                const time = y + '-' + m + '-' + d
                return time
            },
            //修改按钮
            upSign(sid){
               this.updateSign = true
                this.repairInfo.id = sid.id
                this.repairInfo.note = sid.note

            },
            updateSignById(){
                this.$refs.repairInfoRef.validate(async valid => {
                    if(!valid) return
                    const { data: res} = await this.$http.post('Sign/updateSignByid',this.repairInfo)
                    console.log(res)
                    if(res.code !== 0) {
                        return this.$message.error(res.message)
                    }else {
                        this.$message.success('添加成功');
                    }

                    //关闭窗口
                    this.updateSign = false
                    //刷新
                    this.getSignList()

                })
            }
        }
    }
</script>

<style scoped>

</style>